<template>
  <div>
    <div class="theme-content">
      <div class="theme-content-item padding-20px">
        <div>
          <div style="margin-bottom: 13px">
            <div class="left-title">收款账户</div>
            <div v-if="configFlag === 0">
              <div class="param-item">账户名称：{{receivingAccountData.data.name || '暂无'}}</div>
              <div class="param-item">开户银行：{{receivingAccountData.data.bankName || '暂无'}}</div>
              <div class="param-item">银行账号：{{receivingAccountData.data.account || '暂无'}}</div>
            </div>

            <el-form v-if="configFlag === 1" ref="receivingAccountRef" :model="receivingAccountDataRequest.data" :rules="rules" >
              <el-form-item class="param-item" label="账户名称：" prop="name">
                <el-input v-model="receivingAccountDataRequest.data.name" placeholder="请输入账户名称" />
              </el-form-item>
              <el-form-item class="param-item" label="开户银行：" prop="bankName">
                <el-input v-model="receivingAccountDataRequest.data.bankName" placeholder="请输入开户银行" />
              </el-form-item>
              <el-form-item class="param-item" label="银行账号：" prop="account">
                <el-input v-model="receivingAccountDataRequest.data.account" @input="receivingAccountDataRequest.data.account = onlyNumber(receivingAccountDataRequest.data.account) " placeholder="请输入银行账号" />
              </el-form-item>
            </el-form>
            <div>
              <el-button v-hasPermi="[$button.confreceivingAccountedit || null]" v-if="configFlag === 0" type="primary" style="margin-top: 20px" @click="editHandle">修改</el-button>
              <el-button v-if="configFlag === 1" type="primary" style="margin-top: 20px" @click="updateHandle">保存</el-button>
              <el-button v-if="configFlag === 1" style="margin-top: 20px" @click="closeHandle" >取消</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { onlyNumber } from '@/utils/checkInput'
import {receivingAccountDetailApi, receivingAccountUpdateApi} from './const'
import $button from '@/button'
const { proxy } = getCurrentInstance();
const rules = reactive({
  name: [{ required: true, message: '请输入账户名称', trigger: 'blur' }],
  bankName: [{ required: true, message: '请输入开户银行', trigger: 'blur' }],
  account: [{ required: true, message: '请输入银行账号', trigger: 'blur' }]
})
const receivingAccountData = reactive({ data: {} })
const receivingAccountDataRequest = reactive({ data: {} })
const configFlag = ref(0)

const getReceivingAccountDetail = () => {
  receivingAccountDetailApi().then(res => {
    receivingAccountData.data = res.data
    receivingAccountDataRequest.data = res.data
  })
}
const updateHandle = () => {
  proxy.$refs["receivingAccountRef"].validate(valid => {
    if (valid) {
      receivingAccountUpdateApi(receivingAccountDataRequest.data).then(res => {
        ElMessage.success(res.msg || '操作成功')
        closeHandle()
        getReceivingAccountDetail()
      })
    }
  })
}
const closeHandle = () => {
  configFlag.value = 0
  receivingAccountDataRequest.data = {}
}
const editHandle = () => {
  configFlag.value = 1
  Object.keys(receivingAccountDataRequest).forEach((key) => { receivingAccountDataRequest[`${key}`] = receivingAccountData[`${key}`] })
}

onMounted(() => {
  // getReceivingAccountDetail()
})

watch(
  configFlag,
  (newValue, oldValue) => {
    if (newValue == 0) {
      getReceivingAccountDetail();
    }
  },
  { immediate:true }
)

</script>
<style>
.param-item {
  margin-top: 26px;
  font-size: 14px;
}

</style>
